<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Doncare UI</title>
<link href="assets/css/doncare.css" type="text/css" rel="stylesheet" />
<link href="assets/css/doncare.frame.css" type="text/css" rel="stylesheet" />
<link href="assets/font/icon200.css" type="text/css" rel="stylesheet">
<!--[if lt IE 8]>
<link href="assets/font/icon200ie7.css" type="text/css" rel="stylesheet">
<![endif]-->
<script src="assets/js/jquery.js" type="text/javascript"></script>
<script src="assets/js/doncare.js" type="text/javascript" defer></script>
<script src="assets/js/doncare.page.js" type="text/javascript" defer></script>
<script src="assets/js/doncare.frame.js" type="text/javascript" defer></script>
</head>
<body>
<div id="header" class="header">
    <div id="header-title" class="header-title">
        这是一个<small style="color: #ddd"><strike>华丽丽的</strike></small>UI
    </div>
    <div class="header-option">
        <a href="javascript:;" onclick="DC.page.open('download.html');" ><i class="icon-sign-right"></i>继续</a>
    </div>
</div>
<div id="main" class="main">
    <div class="block">
        <div class="block-main">
            <h3>在这个被拍扁的时代，需要一些与<small>shǎn</small>众<small>xiā</small>不<small>gǒu</small>同<small>yǎn</small>的东东</h3>
            <hr />
            Why we make it?
        </div>
    </div>
    
    <div class="row-fluid">
        <div class="span4">
            <div class="panel with-icon">
                <div class="panel-icon">
                    <i class="icon-wrench"></i>
                </div>
                <div class="panel-header">
                    <span>为后台系统定制</span>
                </div>
                <div class="panel-main" style="min-height:80px">
                    <p>这是一个后台UI，她的布局更适于管理、数据展示、表单等功能</p>
                </div>
            </div>
        </div>
        <div class="span4">
            <div class="panel with-icon">
                <div class="panel-icon">
                    <i class="icon-grid"></i>
                </div>
                <div class="panel-header">
                    <span>完善的组件</span>
                </div>
                <div class="panel-main" style="min-height:80px">
                    <p>集成了大部分后台系统需要的组件、布局和典型页面，你下载之后只需要轻度设置，就可以开始创作了</p>
                </div>
            </div>
        </div>
        <div class="span4">
            <div class="panel with-icon">
                <div class="panel-icon">
                    <i class="icon-pen"></i>
                </div>
                <div class="panel-header">
                    <span>使你专注功能</span>
                </div>
                <div class="panel-main" style="min-height:80px">
                    <p>无需考虑如何布局、如何写页面，DoncareUI提供了近乎全部的后台典型页面模板</p>
                </div>
            </div>
        </div>
    </div>
    
    <div class="block">
        <div class="block-main" style="padding-bottom:0">
            <h3>兼容性 <small>Client compatible</small></h3>
            <div class="row-fluid">
                <div class="span4">
                    <div class="block">
                        <div class="block-header">
                            <span><i class="icon-ok"></i> 支持的浏览器</span>
                        </div>
                        <div class="block-main">
                            <p>Firefox 3.0+, Safari 2.0+, Chrome(估计没谁有老版本所以都支持), Opera, IE9.0+</p>
                        </div>
                    </div>
                </div>
                <div class="span4">
                    <div class="block">
                        <div class="block-header">
                            <span><i class="icon-error"></i> 不兼容的浏览器</span>
                        </div>
                        <div class="block-main">
                            <p>IE8, IE7, IE6, IE5.5 ...</p>
                        </div>
                    </div>
                </div>
                <div class="span4">
                    <div class="block">
                        <div class="block-header">
                            <span><i class="icon-sign-question"></i> 为何不兼容</span>
                        </div>
                        <div class="block-main">
                            <p>新世纪了，用点现代化的玩意吧</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="panel">
        <div class="panel-main">
            <h3 style="margin-top: 10px">有版权困扰？</h3>
            别担心！DoncareUI是一套完全免费、可自由修改、重新分发的开源项目，你可以随意修改她，无须担心任何版权问题
        </div>
        <div class="panel-footer">
            <a href="https://github.com/visvoy/doncare-ui" target="_blank" class="btn"><span><i class="icon-next"></i>查看开源项目地址</span></a>
        </div>
    </div>

    <div class="row-fluid">
        <div class="span6">
            <div class="panel with-icon">
                <div class="panel-icon">
                    <i class="icon-quote-left"></i>
                </div>
                <div class="panel-header">
                    <span>谈谈观感</span>
                </div>
                <div class="panel-main">
                    <p>我也不知道这是什么风格，赶脚挺科幻的<br />&nbsp;</p>
                </div>
            </div>
        </div>
        <div class="span6">
            <div class="panel with-icon">
                <div class="panel-icon">
                    <i class="icon-bulb"></i>
                </div>
                <div class="panel-header">
                    <span>灵感来源</span>
                </div>
                <div class="panel-main">
                    <p>这个UI参考了很多东西，无论是平面的、立体的、不同领域的内容，我都向之前创造出可供我参考的作品的设计者们表示致敬！</p>
                </div>
            </div>
        </div>
    </div>
    
</div>

</body>
</html>